// This is the main theme
@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');

@import 'fonts';
@import 'functions';
@import 'variables';
@import 'initials';
@import 'reset';
@import 'modules';

.demo {
  &-buttons {
    display: flex;
    flex-wrap: wrap;

    & > * {
      margin-right: 1rem;
      margin-bottom: 1rem;
      max-width: $btn-width;
      text-align: center;
    }
  }
}


// this is the "pulse" spinner
.waiting {
  display: inline-block;
  position: relative;

  &:after {
    position: absolute;
    border: 2px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 0.8s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    content: ""
  }
}

// The spinner before the application starts.
#root > #initial-loading {
  height: 67vh;
  width: 100%;
  display: flex;

  & > .waiting {
    margin: auto;
    width: 2rem;
    height: 2rem;

    &:after {
      border-color: var(--primary);
      transform: scale(2);
    }
  }
}

@keyframes lds-ripple {
  0% {
    top: 1rem;
    right: 1rem;

    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    right: 0px;
    width: 2rem;
    height: 2rem;
    opacity: 0;
  }
}
// end spinner
